<template>
  <up-tabbar :value="currentIndex" @change="tabbarChange">
    <up-tabbar-item
      :text="item.text"
      v-for="item in tabbarList"
      :key="item.text"
      :name="item.name"
    >
      <template #active-icon>
        <image
          :src="item.activeIcon"
          :style="`width: ${iconSize}; height: ${iconSize}`"
        ></image>
      </template>
      <template #inactive-icon>
        <image
          :src="item.icon"
          :style="`width: ${iconSize}; height: ${iconSize}`"
        ></image>
      </template>
      <template #text>
        <text
          :class="{
            active: item.name === currentIndex,
          }"
          :style="`font-size: ${fontSize}; color: ${
            item.name === currentIndex ? '#EA9EFD' : '#A1A1A1'
          }`"
          >{{ item.text }}</text
        >
      </template>
    </up-tabbar-item>
  </up-tabbar>
</template>

<script setup>
import { ref, reactive } from "vue";
import index from "@/static/images/tabbar/index.png";
import index_active from "@/static/images/tabbar/index_active.png";
import reside from "@/static/images/tabbar/reside.png";
import reside_active from "@/static/images/tabbar/reside_active.png";
import live from "@/static/images/tabbar/live.png";
import knowledge from "@/static/images/tabbar/knowledge.png";
import knowledge_active from "@/static/images/tabbar/knowledge_active.png";
import mine from "@/static/images/tabbar/mine.png";
import mine_active from "@/static/images/tabbar/mine_active.png";
const props = defineProps({
  currentIndex: {
    type: Number,
    default: 0,
  },
});
const { iconSize, fontSize, tabbarList, tabbarChange } = customTabbar();
/**
 * @description 自定义tabbar
 * @returns {Object} iconSize 图标尺寸
 * @returns {Object} fontSize 字体尺寸
 * @returns {Array} tabbarList tabbar数据
 * @returns {Function} tabbarChange 切换tabbar
 */
function customTabbar() {
  const iconSize = ref("44rpx");
  const fontSize = ref("18rpx");
  const tabbarList = reactive([
    {
      icon: index,
      activeIcon: index_active,
      text: "首页",
      name: 0,
      page: "/pages/index/index",
    },
    {
      icon: reside,
      activeIcon: reside_active,
      text: "康养旅居",
      name: 1,
      page: "/pages/sojourn/sojourn",
    },
    {
      icon: live,
      activeIcon: live,
      text: "直播",
      name: 2,
      page: "/pages/live/live",
    },
    {
      icon: knowledge,
      activeIcon: knowledge_active,
      text: "知识分享",
      name: 3,
      page: "/pages/knowledge/knowledge",
    },
    {
      icon: mine,
      activeIcon: mine_active,
      text: "我的",
      name: 4,
      page: "/pages/my/my",
    },
  ]);
  const tabbarChange = (e) => {
    uni.switchTab({
      url: tabbarList[e].page,
    });
  };
  return {
    iconSize,
    fontSize,
    tabbarList,
    tabbarChange,
  };
}
</script>

<style lang="scss" scoped>
//渐变
.active {
  background-image: linear-gradient(
    360deg,
    #ea9efd 0%,
    #46a7fd 85%,
    #b88afd 100%
  );
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
